<template>
	<view :style="`height:${bottomHeight}`">
		<view :class="fixed===true?'bottomBtn_fixed_container':'bottomBtn_container'">
			<zy-button-group class="zy_btn_group" v-if="leftText||rightText">
				<slot></slot>
				<zy-button @click="leftBtn" :disabled="leftDisabled"
					:class="leftText&&rightText?'leftTextBtn':'textBtn'" type="danger">{{leftText}}</zy-button>
				<zy-button @click="rightBtn" :disabled="rightDisabled"
					:class="leftText&&rightText?'rightTextBtn':'textBtn'" type="primary">{{rightText}}</zy-button>
			</zy-button-group>
			<zy-button @click="btn" :disabled="disabled" :type="type" v-else round>{{text}}</zy-button>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['leftBtn', 'rightBtn'],
		props: {
			type: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			//是否固定最底部
			fixed: {
				type: Boolean,
				default: false
			},
			leftDisabled: {
				type: Boolean,
				default: false
			},
			rightDisabled: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				bottomHeight: '',
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this)
			query
				.select('.bottomBtn_fixed_container')
				.boundingClientRect(data => {
					//底部按钮固定设置高度
					this.bottomHeight = data.height + 'px'
				})
				.exec();
		},
		methods: {
			leftBtn() {
				this.$emit('leftBtn')
			},
			rightBtn() {
				this.$emit('rightBtn')
			},
			btn() {
				this.$emit('btn')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>